<template>
	<div class="iconGrid" >
		<div class="grid-row" v-for="(r) in props.gridData.rows" :key="r.id">
			<PadIcon v-for="(cell) in r.cells" :key="cell.id" :id="cell.id" :name="cell.name" :icon="cell.icon"></PadIcon>
		</div>
<!-- 		<div class="grid-row">
			<PadIcon :name="2222" icon="chrome"></PadIcon>
		</div> -->
	</div>
</template>

<script setup>
	import { onMounted } from 'vue'
	import { defineProps } from 'vue';
	import PadIcon from '../views/PadIcon.vue';
	const props = defineProps({
		gridData:{
			type:Object,
			default:new Object()
		}
	})
	onMounted(() => {

	});
</script>

<style lang="less">
.iconGrid{
	width: 100%;
	padding: 20px 30px;
	/**
	border: 1px solid #000;
	background-color: transparent;filter:blur(1px) contrast(.8);
	backdrop-filter: blur(3px);*/
}
.grid-row {
	width: 100%;
	padding: 15px 0 ;
	margin: 10px 0;
	display: flex;
	flex-wrap: wrap;
	//justify-content: space-around;
	align-content: space-between;
}
</style>